<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-select v-model="obj.req.state" placeholder="全部状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.stateTypeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配课程名称" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <!-- <span class="btn download" @click="export_"></span> -->
            <div class="searchRight">
                <span class="btn add" @click="add">添加培训课程</span>
            </div>
        </div>
        <div class="block flex-1" id="tb">
            <div class="body flex-row wrap">
                <div class="box mr20 mb20 shadow radius10 hidden" v-for="x in obj.ary" :key="x">
                    <el-image class="cover" fit="cover" :src="`${proxy.$setting.globalUrl.fileurl}/train/${x.cover}`">
                        <template #error>
                            <div class="image-slot">
                                <el-image  fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                    <div class="right flex-column pd10">
                        <div class="name large-size lineOne">{{x.name}}</div>
                        <div class="msg base-gray-size lineTwo">{{proxy.$utils.removeHTML(x.msg, 50)}}</div>
                        <div class="flex-1"></div>
                        <div class="pd5-column mb5">报名情况：</div>
                        <div class="flex-row-center pointer mb10">
                            <div @click="company(x)" class="state-btn-primary flex-center pd5-column mr5 flex-1">企业</div>
                            <div @click="persion(x)" class="state-btn-primary flex-center pd5-column ml5 flex-1">个人</div>
                        </div>
                        <div class="flex-center">
                            <el-switch class="mt2" v-model="x.state" size="small" :validate-event="false" @change="setstate(x)"
                                active-text="" inactive-text=""
                                active-value="1" inactive-value="0">
                            </el-switch>
                            <el-button class="ml30 mr10 pointer edit_btn" type="success" @click="edit(x)">修改</el-button>
                            <DelConfirm class="" @yesClick="del(x)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Pager class="" :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Edit :train_id="obj.drawer.train_id" @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.company" :title="obj.drawer.companyTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Company :train_id="obj.drawer.train_id" @close="obj.drawer.company = false" />
        </el-dialog>
        <el-dialog v-model="obj.drawer.persion" :title="obj.drawer.persionTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Persion :train_id="obj.drawer.train_id" @close="obj.drawer.persion = false" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Edit from "./edit.vue"
    import Company from "./company.vue"
    import Persion from "./persion.vue"
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            train_id:"",
            design: false,
            designTitle: "",
            company: false,
            companyTitle: "",
            persion: false,
            persionTitle: "",
        },
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 6,
            count: 0,
            key: "",
            state:"",
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/train/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加培训课程"
        obj.drawer.train_id = "0";
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改培训课程"
        obj.drawer.train_id = x.train_id;
    }

    let company = x => {
        obj.drawer.company = true
        obj.drawer.companyTitle = `${x.name} 报名的企业`
        obj.drawer.train_id = x.train_id;
    }
    let persion = x => {
        obj.drawer.persion = true
        obj.drawer.persionTitle = `${x.name} 报名的人才`
        obj.drawer.train_id = x.train_id;
    }

    let setstate = x => {
        proxy.$ajax({
            url: '/train/setstate',
            data: { train_id: x.train_id},
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("状态变更成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    let del = x => {
        proxy.$ajax({
            url: '/train/delete',
            data: { train_id: x.train_id},
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("删除成功", "success")
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style lang="scss" scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }

    .block { 
        display: flex; flex-direction: column; color: rgba(0,0,0,.85); font-size:14px; /*flex:1;*/ margin-bottom: 20px; min-height: 0; /*这会导致内部撑开而不撑爆 */ 
        overflow-y: auto; padding-bottom: 20px; box-sizing: border-box;
        .box { width: calc(33% - 13px); height: 210px; }
        .box:nth-child(3n){margin-right: 0 !important;}
        .box:nth-child(n+6){margin-bottom: 0 !important;}
        .cover { width: 40%; height: 210px; float: left;overflow: hidden; }
        .right { width: 60%; height:210px; }
    }
</style>